import { log } from "console";
import React, { useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import { ListState } from "../home";
import axios from "axios";

const Index: React.FC = () => {
  // 1. 方式一： 可以可通过路由隐式传参 传递数据state

  // const location = useLocation();
  // const v = location.state as ListState;

  // return (
  // <div>
  //   <img src={v.image} width="100%" alt="" />
  //   <h3>{v.title}</h3>
  //   <p>{v.word}</p>
  //   <p>￥：{v.price}</p>
  // </div>
  // );

  // 2. 方式二：通过动态路由获取id  发送请求  获取详情数据
  // 获取动态路由参数
  const { id } = useParams();
  
  const [v, setV] = useState({} as ListState);

  const fetchDetailData = async () => {
    const resp = await axios.post("/api/list/" + id);
    setV(resp.data.data);
  };

  useEffect(() => {
    fetchDetailData();
  }, []);

  return (
    <div>
      <div>
        <img src={v.image} width="100%" alt="" />
        <h3>{v.title}</h3>
        <p>{v.word}</p>
        <p>￥：{v.price}</p>
      </div>
    </div>
  );
};

export default Index;
